<template>
	<el-container>
		<div class="tree-container">
			<div class="block">
				<div style="text-align: left;padding: 0.1rem;">
					<el-button class="el-main-color" size="mini" @click="showDialog(1)">新增一级菜单</el-button>
				</div>
				<el-tree :data="data" ref="tree" node-key="id" :props="nodeProps" default-expand-all :expand-on-click-node="false">
					<span class="custom-tree-node esp" slot-scope="{ node, data }" @mouseover="showOperation(data)" @mouseout="hiddenOperation(data)" @click="nodeClick(data,node)">
	        				<span style="height: 15px;line-height: 15px;">{{ node.label }}</span>
					<span v-show="currentId == data.id">
				          <el-button
				            type="primary"
				            size="mini"
				            @click.stop="() => append(node,data)"
				            icon="el-icon-plus" circle>
				          </el-button>
				          <el-button
				            type="danger"
				            size="mini"
				            @click.stop="() => remove(node, data)"
				            icon="el-icon-minus" circle>
				          </el-button>
				        </span>
					</span>
				</el-tree>
			</div>
		</div>
		<div class="menu-detail">
			<el-form ref="menu" :model="menu" label-width="80px" style="text-align: left;margin-top: 0.3rem;margin-right: 0.3rem;">
				<el-form-item label="菜单名称">
					<el-input v-model="editMenu.label"></el-input>
				</el-form-item>
				<el-form-item label="菜单url">
					<el-input v-model="editMenu.url" :disabled="editCurrentNodeStatus" :placeholder="editCurrentNodeStatus?'目录菜单不需要填写url':'菜单url'"></el-input>
				</el-form-item>
				<el-form-item label="菜单图标">
					<el-input v-model="editMenu.icon" class="icon-input"></el-input>
					<span>图标展示：</span><i :class="editMenu.icon"></i>
				</el-form-item>
				<el-form-item label="是否启用">
					<el-switch v-model="editMenu.status"></el-switch>
				</el-form-item>
				<el-form-item label="备注信息">
					<el-input type="textarea" rows="4" placeholder="菜单备注信息" v-model="editMenu.remark"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align: center;">
				<el-button type="primary" @click="editEnsure()" size="small" :loading="editSaveButtonStatus">保存</el-button>
				<el-button type="primary" @click="freshCache()" icon="el-icon-refresh" size="small">刷新缓存</el-button>
			</div>
		</div>
		<el-dialog title="新建菜单" :visible.sync="dialogMenuVisible">
			<el-form ref="menu" :model="menu" label-width="80px" style="text-align: left;">
				<el-form-item label="菜单名称">
					<el-input v-model="menu.label"></el-input>
				</el-form-item>
				<el-form-item label="菜单url">
					<el-input v-model="menu.url" :disabled="editCurrentNodeStatus" :placeholder="editCurrentNodeStatus?'目录菜单不需要填写url':'菜单url'"></el-input>
				</el-form-item>
				<el-form-item label="菜单图标">
					<el-input v-model="menu.icon" class="icon-input"></el-input>
					<span>图标展示：</span><i :class="menu.icon"></i>
				</el-form-item>
				<el-form-item label="是否启用">
					<el-switch v-model="menu.status"></el-switch>
				</el-form-item>
				<el-form-item label="备注信息">
					<el-input type="textarea" rows="4" placeholder="菜单备注信息" v-model="menu.remark"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogMenuVisible = false" size="small">取 消</el-button>
				<el-button type="primary" @click="addMenu()" size="small" :loading="newSaveButtonStatus">确 定</el-button>
			</div>
		</el-dialog>
	</el-container>
</template>
<style>
	@import url("menuSetting.css");
	@import url("../../common/common.css");
</style>
<script>
	import $ from 'jquery'
	export default {
		name: 'menuSetting',
		data() {
			return {
				data: [],
				nodeProps: {
					label: 'label',
					children: 'childrenMenu'
				},
				menu: {
					icon: 'el-icon-plus'
				},
				dialogMenuVisible: false,
				tempData: null,
				currentId: '',
				editMenu: {},
				editSaveButtonStatus:false,
				newSaveButtonStatus:false,
				freshSaveButtonStatus:false,
				editCurrentNodeStatus:false
			}
		},
		created() {
			this.getMenu();
		},
		methods: {
			getMenu() {
				var _self = this;
				this.utils.get({
					url: 'menu/menu',
					success: function(res) {
						_self.data = res;
					}
				})
			},
			append(node, data) {
				this.menu = {
					parentId: data.id,
					icon: 'el-icon-location'
				};
				this.$refs.tree.setCurrentNode(data)
				console.log(node)
				if(node.level == 2){
					this.editCurrentNodeStatus = false;
				}else{
					this.editCurrentNodeStatus = true;
				}
				this.dialogMenuVisible = true;
				this.tempData = data;
			},
			remove(node, data) {
				var _self = this;
				this.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
					confirmButtonText: '继续',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					_self.utils.ajaxJSON({
						type: 'DELETE',
						url: 'menu/tree',
						data: data,
						success: function(res) {
							if(res.status == 200) {
								const parent = node.parent;
								const children = parent.data.childrenMenu || parent.data;
								const index = children.findIndex(d => d.id === data.id);
								children.splice(index, 1);
								_self.$message({
									type: 'success',
									message: '删除成功!'
								});
							} else {
								_self.$message({
									type: 'error',
									message: res.msg
								});
							}
						}
					})
				}).catch(() => {
					_self.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			showDialog(type) {
				this.menu = {
					icon: 'el-icon-location'
				}
				this.editCurrentNodeStatus = true;
				this.dialogMenuVisible = true;
			},
			addMenu() {
				var _self = this;
				var type;
				if(_self.menu.id) { //存在id表示编辑
					type = 'PUT';
				} else { //没有id表示新增
					type = 'POST'
				}
				_self.newSaveButtonStatus = true;
				this.utils.ajaxJSON({
					type: type,
					url: 'menu/tree',
					data: _self.menu,
					success: function(res) {
						_self.dialogMenuVisible = false;
						if(res.parentId) { //表示子菜单
							_self.$refs.tree.append(res, _self.tempData)
						} else { //表示一级菜单
							_self.data.push(res);
						}
						_self.newSaveButtonStatus = false;
						_self.$message({
							type: 'success',
							message: '新增菜单成功!'
						});
					}
				});
			},
			showOperation(data) {
				this.currentId = data.id;
			},
			hiddenOperation(data) {
				this.currentId = '';
			},
			nodeClick(data,node) {
				console.log(node+'1')
				if(node.level == 3){
					this.editCurrentNodeStatus = false;
				}else{
					this.editCurrentNodeStatus = true;
				}
				this.editMenu = JSON.parse(JSON.stringify(data));
				this.tempData = data;
			},
			editEnsure() {
				var _self = this;
				_self.editSaveButtonStatus = true;
				this.utils.ajaxJSON({
					type: 'post',
					url: 'menu/tree',
					data: _self.editMenu,
					success: function(res) {
						var node = _self.$refs.tree.getNode(_self.tempData.id);
						node.data = res;
						_self.editSaveButtonStatus = false;
						_self.$message({
							type: 'success',
							message: '更新菜单成功!'
						});
						
					}
				});
			},
			freshCache(){
				var _self = this;
				_self.freshSaveButtonStatus = true;
				this.utils.get({
					type: 'get',
					url: 'menu/clearAllCache',
					success: function(res) {
						_self.freshSaveButtonStatus = false;
						_self.$message({
							type: 'success',
							message: '菜单缓存刷新成功!'
						});
						
					}
				});
			}
		}
	}
</script>